<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：首页-产品-产品对比页
      展示在 爆款产品和新品上市中 添加到对比列表的产品
      点击复选框可勾选产品, 勾选一款后其他品类产品隐藏,只显示与勾选产品同品类下的产品, 选中两款时可点击 开始对比 跳转至产品整体对标页面
      点击编辑按钮后,可对当前对比列表中的产品进行删除操作
      点击添加产品, 弹出筛选条件窗口,根据选择的筛选条件展示出符合条件的产品,选中某款产品后点击 选择产品 ,可将产品添加至对比列表中
 参数：
 事件：
-->
<template>
  <div>
    <toolbar :view-title='viewTitle'>
      <div
        class='leftButton'
        type='button'
        slot='left-button'
        @click='goBack'>&nbsp;
      </div>
      <div
        class='rightButton'
        type='button'
        slot='right-button'
        @click='editList'>
        <div class="editButton" v-if="!isEdit">
          <span class="editIcon">&nbsp;</span>
          <span>编辑</span>
        </div>
        <span v-else class="filterOver">完成</span>
      </div>
    </toolbar>
    <div class='contrast'>
      <div class="select-brand">

        <div @click="showFilter" v-show="!filterOpenState">
          <div class="text-center btn btn-addProduct pt100">添加产品+</div>
        </div>
        <div class="text-center btn">
          <button class="btn-doContrast mb100" @click="doContrast" :disabled="!canDoContrast"
                  :class="{enabled: canDoContrast == true }">
            开始对比<span v-if="!canDoContrast">（请选择两款产品进行对比！）</span>
          </button>
        </div>
      </div>
      <div class="content">
        <ul v-for="category in productList | limitBy choseNum chooseCategory" class="display-flex product-list" v-show="category.childs.length !== 0">
          <div class="product-name flex1">{{category.name}}</div>
          <div class="product-detail flex4">
            <li v-for="item in category.childs" class="display-flex  item-product">
              <img :src="item.img_url || './static/img/125125.png'" class="flex2 item-img">
              <div class="flex2 pl10">
                <p>{{item.brand}}</p>
                <p>{{item.model}}</p>
              </div>
              <div class="flex1">
                <label v-if="!isEdit" class="jointoContrast"><input type="checkbox" :id="item.id"
                                                                    :brand="item.brand"
                                                                    :model="item.model"
                                                                    :modelid="item.model_id"
                                                                    :categoryId="item.category_id"
                                                                    :category="item.category"
                                                                    @change="join($event, $parent.$index, this, item)"></label>
                <label v-else class="removeProduct">X<input type="checkbox" class=""
                                                            @change="removeProduct($event, $parent.$index, this, item)"></label>
              </div>
            </li>
          </div>
        </ul>
      </div>
    </div>
    <filter-view v-show="filterOpenState"
                 :choose-platforms="choosePlatforms"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"
                 :page-id="'productMonitor'">
    </filter-view>
    <confirm :show.sync="timeoutStatus"
       title="加载失败,您可以"
       cancel-text="返回首页"
       confirm-text="重新加载"
       @on-cancel="this.$route.router.go('/home')"
       @on-confirm="reload"></confirm>
    <div class="loading-box">
      <img src="../../../static/img/loading.gif" class="loading">
    </div>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import FilterView from '../common/FilterViewForConsultant.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
//      SelectForAdd,
      FilterView,
      Confirm
    },
    data: function () {
      return {
        timeoutStatus: false,
        filterOpenState: false,
        defaultOrgId: '',
        defaultCategory: '',
        defaultCategoryId: '',
        choosePlatforms: '所有平台',
        viewTitle: '产品对比列表',
        productList: [],
        productName: '',
        canDoContrast: false,
        isEdit: false,
        choseProductState: false,
        choseNum: '',
        chooseCategory: '',
        brand1: '',
        model1: '',
        brand2: '',
        model2: ''
      }
    },
    methods: {
      reload: function () {
        window.location.reload()
      },
      showFilter: function () {
        this.filterOpenState = true
      },
      goBack: function () {
        window.history.back()
      },
      addMoreProduct: function () {
        this.choseProductState = true
      },
      editList: function () {
        this.isEdit = !this.isEdit
      },
//      从对比列表中移除产品
      removeProduct: function ($event, index, arg1, item) {
        var category = item.category_id
        var model = item.model
        var brand = item.brand
        this.$http.post(window.interface.productMonitor.delete, {'category_id': category, 'model': model, 'brand': brand}).then(function (res) {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          var data = res.json()
          if (data.success === true) {
            this.productList[index].childs.splice(arg1.$index, 1)
          }
        })
      },
//      添加产品到选中列表中
      join: function ($event, index, arg1) {
        var chooseProductNum = document.querySelectorAll('input[type=checkbox]:checked').length
        var _this = this
        if ($event.target.checked) {
          if (chooseProductNum < 2) {
            _this.chooseCategory = index
            _this.choseNum = 1
          }
          $event.target.parentNode.classList.add('ischecked')
        } else {
          if (chooseProductNum < 1) {
            _this.choseNum = _this.productList.length
            _this.chooseCategory = 0
          }
          $event.target.parentNode.classList.remove('ischecked')
        }
//        如果当前选中的产品个数为2个, 则启用对比按钮, 点击后可调转至 产品整体对标 页面
        if (chooseProductNum === 2) {
          _this.canDoContrast = true
          document.querySelectorAll('.content')[0].classList.add('selected-bg')
        } else {
          document.querySelectorAll('.content')[0].classList.remove('selected-bg')
          _this.canDoContrast = false
        }
      },
//      开始对比
      doContrast: function () {
        var model1 = ''
        var model2 = ''
        var modelAID = ''
        var modelBID = ''
        var brand1 = ''
        var brand2 = ''
        var categoryId = ''
        var category = ''
        try {
          // window.alert('开始检测')
          model1 = document.querySelectorAll('input[type=checkbox]:checked')[0].attributes.model.nodeValue
          // window.alert(model1)
          model2 = document.querySelectorAll('input[type=checkbox]:checked')[1].attributes.model.nodeValue
          // window.alert(model2)
          modelAID = document.querySelectorAll('input[type=checkbox]:checked')[0].attributes.id.nodeValue
          // window.alert(modelAID)
          modelBID = document.querySelectorAll('input[type=checkbox]:checked')[1].attributes.id.nodeValue
          // window.alert(modelBID)
          brand1 = document.querySelectorAll('input[type=checkbox]:checked')[0].attributes.brand.nodeValue
          // window.alert(brand1)
          brand2 = document.querySelectorAll('input[type=checkbox]:checked')[1].attributes.brand.nodeValue
          // window.alert(brand2)
          categoryId = document.querySelectorAll('input[type=checkbox]:checked')[0].attributes.categoryId.nodeValue
          // window.alert(categoryId)
          category = document.querySelectorAll('input[type=checkbox]:checked')[0].attributes.category.nodeValue
          // window.alert(category)
        } catch (error) {
          console.log(error)
        }
        this.$route.router.go('/peer/productOverallComparison?key=productOverallComparison&brand1=' + brand1 + '&brand2=' + brand2 + '&model1=' + model1 + '&model2=' + model2 + '&categoryId=' + categoryId + '&category=' + category + '&model1_id=' + modelAID + '&model2_id=' + modelBID)
      },
//      进入页面时获取对比列表
      getData: function () {
        // this.$dispatch('changeLoadingStatus', true)
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.$http.get(window.interface.productMonitor.comparision, {_timeout: 300000}).then(function (res) {
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          this.$dispatch('changeLoadingStatus', false)
          // this.$broadcast('parentLoadDataFinished')
          var data = res.json()
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = data.category || ''
          this.defaultCategoryId = data.category_id || ''
          this.productList = res.json().data
          this.defaultCategoryId = res.json().data[0].childs[0].category_id
          this.choseNum = this.productList.length
          this.chooseCategory = 0
          this.$broadcast('loadDataDone')
        }, (res) => {
          // this.$dispatch('changeLoadingStatus', false)
          this.timeoutStatus = true
        })
      }
    },
    events: {
//      接收来自筛选组件传递出来的筛选条件, 根据筛选条件来请求符合条件的产品, 供添加至对比列表
      'filterConditions': function (filterConditions) {
        var category = filterConditions.category_id
        var model = filterConditions.model
        var brand = filterConditions.brand
        this.$http.post(window.interface.productMonitor.add, {'category_id': category, 'model': model, 'brand': brand}).then(function (res) {
          var data = res.json()
          if (data.success === true) {
            this.getData()
          }
        })
      }
    },
    watch: {
      'productList': function (val, oldVal) {
      }
    },
    ready: function () {
      this.getData()
    }
  }
</script>

<style lang='scss' scoped>
  .contrast {
    margin-top: 8vh;
    margin-bottom: 7.5vh;

    .content{
      height: 69vh;
      overflow-y: scroll;
    }

    .input-search {
      outline: none;
      height: 100%;
      width: 60%;
      border: transparent;
      background: transparent;
    }

    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      vertical-align: middle;
      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
    }

    .tip {
      margin: 0 auto;
      padding-left: .4rem;
      text-align: left;
      color: #FFD38B;
      background: url('../../../static/img/icon-tip.png') no-repeat center left / .3rem .3rem;
    }

    .product-list {
      align-items: center;
      border-top: 5px solid #f2f2f2;

      &:last-child {
        border-bottom: 3px solid #f2f2f2;
      }
      .product-name {
        padding: .2rem;
        text-align: center;
      }

      .product-detail {
        /*box-shadow: -2px 0px 5px #dedede;*/
        border-left: 1px solid #dedede;
      }

    }

    .btn-addProduct, .btn-doContrast {
      display: block;
      margin: .2rem auto;
      width: 90%;
      height: 38px;
      line-height: 38px;
      border-radius: 3px;
      font-size: 18px;
    }

    .btn-addProduct {
      color: rgba(74, 144, 226, 1);
      border: 1px solid #e5e5e5;
    }

    .btn-doContrast {
      color: #999;
      background: rgba(245, 245, 245, 1);
    }

    .item-product {
      padding: .2rem 0 .2rem .2rem;
      align-items: center;

      p{
        overflow: hidden;
        word-wrap:break-word;
        max-width: 2rem;
        font-size: .25rem;
      }
    }

    .item-img {
      width: 100px;
    }

    .enabled {
      color: #fff;
      background: #4A90E2;
    }

    .jointoContrast, .removeProduct {
      display: block;
      width: .44rem;
      height: .44rem;
      line-height: .44rem;
      border: 1px solid #D8D8D8;
      border-radius: 10%;
      font-size: .3rem;
      text-align: center;
      color: #f00;

      & > input {
        display: none;

        &[checked] {

        }
      }
    }

    .removeProduct {
      background: #FF8B8B;
      color: #fff;
      border: none;
    }

    .jointoContrast.ischecked:after {
      display: block;
      content: "√";
      color: #fff;
      border: none;
      background: #4A90E2;
      background-size: 100%;
    }
  }

  .editIcon{
    display: block;
    height: 60%;
    background: url('../../../static/img/icon-edit.png') no-repeat center 65%;
    background-size: 0.38rem 0.38rem;
  }
  .editButton{
    width: .7rem;
    float: left;
    text-align: center;
    height: 100%;
  }

  .selected-bg{
    .product-list{
      background: rgba(245, 250, 255, 1)
    }
    .product-detail{
      background: rgba(244, 249, 255, .4)
    }

  }

</style>
